<template>
    <div :class="mclass">
        <el-form-item :label="label || '图标'">
            <el-radio-group v-model="icon.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">隐藏</el-radio>
            </el-radio-group>
            <el-tooltip class="item" effect="dark" content="折叠/展开" placement="top">
                <div class="common-ele-collapsed" v-show="icon.show" @click="collapseChange">
                    <i class="fa fa-angle-up" v-if="!collapse"></i>
                    <i class="fa fa-angle-down" v-if="collapse"></i>
                </div>
            </el-tooltip>
            <div class="form-item-ext" v-show="icon.show && !collapse">
                <div class="form-item-ext-row flex flex-v-center flex-start">
                    <el-form :model="icon"
                             label-width="40px" size="mini" style="width:100%;">
                        <template v-if="icon.show">
                            <el-form-item label="图标">
                                <el-col :span="4">
                                    <el-tooltip class="item" effect="dark" content="图标字体" placement="top">
                                        <icon-picker v-model="icon.icon"
                                                       size="mini"></icon-picker>
                                    </el-tooltip>
                                </el-col>
                                <el-col class="line" :span="1">&nbsp;</el-col>
                                <el-col :span="5">
                                    <el-tooltip class="item" effect="dark" content="图标图片" placement="top">
                                        <file-picker v-model="icon.img" theme="mini"></file-picker>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="12" class="tip-txt">图片优先图标</el-col>
                            </el-form-item>
                            <el-form-item label="颜色">
                                <el-tooltip class="item" effect="dark" content="图标颜色" placement="top">
                                    <color-picker v-model="icon.color" size="small" show-alpha></color-picker>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label="大小">
                                <!--<el-input-number v-model="icon.size"
                                                 :min="10" :max="50" size="mini" style="width:90px;"></el-input-number>-->
                                <el-col :span="14">
                                    <el-slider
                                        v-model="icon.size"
                                        input-size="mini"
                                        height="20"
                                        :min="10" :max="50"
                                        size="mini">
                                    </el-slider>
                                </el-col>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="8" class="tip-txt">字/图大小</el-col>
                            </el-form-item>

                            <el-form-item label="尺寸">
                                <el-col :span="14">
                                    <el-slider
                                        v-model="icon.width"
                                        input-size="mini"
                                        height="20"
                                        size="mini">
                                    </el-slider>
                                </el-col>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="8" class="tip-txt">占用尺寸</el-col>
                            </el-form-item>

                            <el-form-item label="圆角">
                                <el-col :span="14">
                                    <el-slider
                                        v-model="icon.radius"
                                        input-size="mini"
                                        height="20"
                                        size="mini">
                                    </el-slider>
                                </el-col>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="8" class="tip-txt">圆角</el-col>
                            </el-form-item>
                            <c-bg :bg="icon.bg" v-if="icon.bg" label="背景"></c-bg>
                            <c-border :border="icon.border" v-if="icon.border" label="边框"></c-border>
                            <c-margin :margin="icon.margin" v-if="icon.margin" label="外距"></c-margin>
                            <c-margin :margin="icon.padding" v-if="icon.padding" label="内距"></c-margin>
                        </template>

                    </el-form>
                </div>
            </div>
        </el-form-item>

    </div>
</template>

<script type="text/javascript">
    import cBorder from './border';
    import cBg from './bg';
    import cMargin from './margin';

    export default {
        props: [ 'icon', 'label', 'mclass', 'collapsed'],
        data () {
            return {
                collapse: false
            }
        },
        mounted () {
            this.collapse = this.collapsed;
        },
        components: {
            cBorder,
            cBg,
            cMargin,
        },
        watch: {
            'icon.show'(val) {
                if(val) {
                    this.collapse = false;
                }
            }
        },
        methods: {
            collapseChange() {
                this.collapse = !this.collapse;
            }
        }
    }
</script>
